import React, {Component} from 'react';
import {Button, Checkbox, Layout, Form, Input, Icon, message} from 'antd';
import {connect} from 'react-redux';
import CSSModules from 'react-css-modules';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import CanvasBack from '@/components/Login/CanvasBack';
import {uncompile, compile} from '../utils';
import {login} from './LoginRedux';

import LogoImg from '../../assets/logo.png';
import styles from './Login.less';


const {
  Header, Footer, Sider, Content,
} = Layout;
const FormItem = Form.Item;

@connect((state) => ({
  user: state.user
}), (dispatch) => ({
  login: params => dispatch(login(params))
}))
@Form.create()
@CSSModules(styles, {
  allowMultiple: true,
})
export default class Login extends Component {
  static propTypes = {
    location: PropTypes.any
  }
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      show: false,  // 加载完毕时触发动画
    };
  }

  componentWillMount() {
  }

  componentDidMount() {
    const form = this.props.form;
    let loginUser = localStorage.getItem('loginUser');
    if (loginUser) {
      form.setFieldsValue({
        username: loginUser,
        remember: true
      });
    } else {
      this.userNameInput.focus();
    }
    this.setState({
      show: true,
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    const form = this.props.form;
    form.validateFields((error, values) => {
      if (!error) {
        this.props.login({
          username: values.username,
          password: values.password
        });
      }
    })
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const loginWrapStyle = classNames({
      'login-box': true,
      'show': this.state.show,
    })
    return (
      <Layout>
        <Content>
          <div styleName="login-page">
            <CanvasBack row={12} col={8}/>
            <div styleName={loginWrapStyle}>
              <Form onSubmit={this.handleSubmit.bind(this)}>
                <div styleName="title">
                  <img src={LogoImg} alt="logo"/>
                  <span>React-Admin</span>
                </div>
                <FormItem key="username">
                  {getFieldDecorator('username', {
                    rules: [{required: true, message: '用户名不能为空'}]
                  })(
                    <Input
                      prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                      placeholder="用户名"
                      ref={(input) => this.userNameInput = input}
                      autoComplete="username"
                    />
                  )}
                </FormItem>
                <FormItem key="password">
                  {getFieldDecorator('password', {
                    rules: [{required: true, message: '密码不能为空'}]
                  })(
                    <Input type="password" prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                           placeholder="密码" autoComplete="password"/>
                  )}
                </FormItem>
                <FormItem >
                  {getFieldDecorator('remember', {
                    valuePropName: 'checked',
                    initialValue: true
                  })(
                    <Checkbox styleName="remember" key="remember">记住我</Checkbox>
                  )}
                  <Button key="login-btn" type="primary" htmlType="submit" styleName="login-btn" loading={this.state.loading}>
                    {this.state.loading ? '请稍后' : '登录'}
                  </Button>
                </FormItem>
              </Form>
            </div>
          </div>
        </Content>
      </Layout>
    )
  }
}
